/* 添加/修改 文件*/
import React from "react";
import { Form, Button, Layout, Input, Radio, Icon, Modal } from 'antd';
import {message, Select} from "antd/lib/index";
import {projectModuleListApi, fetchTableListApi, addFileInfoApi} from "../api/projectConfig"
import {withRouter} from 'react-router-dom';
import Qs from 'qs'
const FormItem = Form.Item;
const Option = Select.Option;

class FileForm extends React.Component {

    projectId = 0;
    updateCallBackFun;

    defaultModule = {id: 0, name: "", showName: "-公共模块-"};
    defaultSuper = {id: 0, name: "", comment: "-无继承-"};

    state = {

        visible: false,

        superFileList:[this.defaultSuper], // 继承对象
        moduleList: [this.defaultModule], //
        fileTypeList:['controller','service','domain','vo','page','dao'],
        classTypeList:['class', 'enum'],

        // form value
        name: '',
        superId: 0, // 继承ID
        paradigm: 'no',
        fileType: 'controller',
        moduleId: 0,
        classType: 'class'
    }

    constructor(props) {
        super(props);

    }

    componentDidMount() {

        this.props.onRef(this);

        let {location: {search}} = this.props;
        let {projectId} = Qs.parse(search.substr(1));
        this.projectId = projectId;


        let modulRet = projectModuleListApi(this.projectId);
        modulRet.then(res=>{
            let list = [this.defaultModule, ...res.data.data];
            this.setState({...this.state, moduleList: list});
        })

    }

    fetchTableList = (value)=> {

        if(value == 'vo') {
            let ret = fetchTableListApi(this.projectId, 'vo');
            ret.then(res=>{
                var _list = res.data.data ? res.data.data : [];
                let list = [this.defaultSuper, ..._list];

                this.setState({...this.state, superFileList: list});
            })
        } else {
            this.setState({...this.state, superId: 0, superFileList: [this.defaultSuper]});
        }

    }

    showFileFormPanel = (fileObj, callFun)=>{

        this.updateCallBackFun = callFun;
        this.fetchTableList(fileObj.fileType);

        let _state = {...this.state, ...fileObj, visible: true}
        this.setState(_state)
        this.props.form.setFieldsValue(_state);

    }

    handleOk = () => {
        let that = this;
        const { microId } = this.props;
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {

                console.log('Received values of form: ', values);

                let formData = that.props.form.getFieldsValue();
                formData.projectId = that.projectId;
                formData.microId = microId;

                console.info(JSON.stringify(formData));
                /***/
                let addFunRet = addFileInfoApi(formData);
                addFunRet.then((res) => {
                    that.updateCallBackFun('add');
                    message.success('保存成功！');
                    that.setState({...this.state, visible: false})
                });

            }
        });
    }

    handleCancel = () => {
        this.setState({...this.state, visible: false})
        if(this.updateCallBackFun) {
            this.updateCallBackFun('close');
        }
    }

    selectDomain = (id) => {
        const { setFieldsValue } = this.props.form;
        const { superFileList } = this.state;
        const seldDomain = superFileList.filter(value => value.id === id)[0];
        setFieldsValue({'name': seldDomain.javaTableName+'Vo'});
    }

    render() {

        const { getFieldDecorator } = this.props.form;

        // add file layout 22
        const addFileFormLayout = {
            labelCol: {
                xs: { span: 12 },
                sm: { span:  4},
            },
            wrapperCol: {
                xs: { span: 16 },
                sm: { span: 16 },
            },
        };
        const inputWidth = '60% !important';
        return (<Modal
            width={800}
            keyboard={false}
            maskClosable={false}
            visible={this.state.visible}
            title="添加文件"
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={[
                <Button key="back" onClick={this.handleCancel}>关闭</Button>,
                <Button key="submit" type="primary" loading={false} onClick={this.handleOk}>
                    确定
                </Button>,
            ]}
        >

            <Form className="form_row_small_margin" onSubmit={this.saveFileInfo}>

                <FormItem label="所属模块" {...addFileFormLayout} >
                    {getFieldDecorator('moduleId', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                        <Select className="ant-col-16" style={{width: inputWidth}}>
                            {this.state.moduleList.map((value, index) =>{
                                return (<Option key={'module_list_' + index}value={value.id}>{value.name}-{value.showName}</Option>)
                            })}
                        </Select>
                    )}
                    <span className="ant-form-text"> * 所属模块</span>
                </FormItem>

                <FormItem label="继承对象" {...addFileFormLayout} >
                    {getFieldDecorator('superId', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                        <Select className="ant-col-16" onChange={this.selectDomain.bind(this)}>
                            {this.state.superFileList.map((value, index) =>{
                                return (<Option key={'super_file_' + index} value={value.id}>{value.name}-{value.comment}</Option>)
                            })}
                        </Select>
                    )}
                    <span className="ant-form-text"> 继承对象</span>
                </FormItem>

                <FormItem label="文件名称" {...addFileFormLayout} >
                    {getFieldDecorator('name', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                        <Input className="ant-col-16"/>
                    )}
                    <span className="ant-form-text"> * 文件名称类名</span>
                </FormItem>

                <FormItem label="文件类型" {...addFileFormLayout} >
                    {getFieldDecorator('fileType', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                    <Select onChange={this.fetchTableList} className="ant-col-16">
                        {this.state.fileTypeList.map((value, index) =>{
                            return (<Option key={'file_type_' + index} value={value}>{value}</Option>)
                        })}
                    </Select>
                    )}
                    <span className="ant-form-text"> * 文件类型</span>
                </FormItem>



                <FormItem label="是否范型" {...addFileFormLayout} >
                    {getFieldDecorator('paradigm', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                    <Radio.Group className="ant-col-10" >
                        <Radio.Button value="yes">是</Radio.Button>
                        <Radio.Button value="no">否</Radio.Button>
                    </Radio.Group>
                    )}
                    <span className="ant-form-text"> * 是否范型</span>
                </FormItem>

                <FormItem label="类-类型" {...addFileFormLayout} >
                    {getFieldDecorator('classType', {
                        rules: [{ required: true, message: 'Please input your note!' }],
                    })(
                    <Radio.Group className="ant-col-10">
                        <Radio.Button value="class">class</Radio.Button>
                        <Radio.Button value="enum">enum</Radio.Button>
                    </Radio.Group>
                    )}
                    <span className="ant-form-text"> * 类-类型</span>
                </FormItem>



            </Form>

        </Modal>)
    }

}

const _FileForm = withRouter(Form.create()(FileForm));
export default _FileForm
